<!-- StretchH last column start -->
<section id="stretchH">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">StretchH last column</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard">
                    <p>The following example creates a table with vertical scrollbar by specifying only the container height and overflow: hidden in CSS. The last column is stretched using stretchH: 'last' option.</p>
    				<div id="stretch" class="hot handsontable"></div>
    			</div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- StretchH last column end -->

<!-- Freezing start -->
<section id="freezing-column">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Freezing</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body card-dashboard">
                    <p>In order to manually freeze a column (in another words - make it fixed), you need to set the manualColumnFreeze config item to true in Handson table initialization. When the Manual Column Freeze plugin is enabled, you can freeze any non-fixed column and unfreeze any fixed column in your Handson table instance using the Context Menu.</p>
                    <div class="table-responsive scroll-container">
                        <div id="freezing" class="hot handsontable htRowHeaders htColumnHeaders"></div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Freezing end -->